<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置</title>
    <link rel="stylesheet" href="css/setting.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>
<body>
<header>
    <div class="logo">
        <img src="img/logo.png" alt="购物网站标志">
    </div>
    <div class="user-info">
        <a href="mine.html">个人主页</a> |  <a href="javascript:logout()" class="logout">退出登录</a>
    </div>
</header>

<nav>
    <ul>
        <li><a href="home.html">首页</a></li>
        <li><a href="shoppingcart.html">购物车</a></li>
        <li>
            <a >我的订单</a>
            <ul class="dropdown">
                <li><a href="order.html#all">历史订单</a></li>
                <li><a href="order.html#unpaid">待支付</a></li>
                <li><a href="order.html#paid">已支付</a></li>
                <li><a href="order.html#uncommented">待评价</a></li>
                <li><a href="order.html#commented">已评价</a></li>
            </ul>
        </li>
        <li>
            <a >设置</a>
            <ul class="dropdown">
                <li><a href="setting.html#profile">个人信息</a></li>
                <li><a href="setting.html#change-password">修改密码</a></li>
            </ul>
        </li>
    </ul>
</nav>

<main>

    <section id="profile" class="user-profile">
        <form id="profile-form">
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email" required>
            <label for="phone">手机号:</label>
            <input type="tel" id="phone" name="phone" required>
            <label for="address">收货地址:</label>
            <input type="text" id="address" name="address" required>
            <button type="submit">保存信息</button>
        </form>
    </section>

    <section id="change-password" class="user-profile" style="display: none;">
        <form id="password-form">
            <label for="current-password">当前密码:</label>
            <input type="password" id="current-password" name="current-password" required>
            <label for="new-password">新密码:</label>
            <input type="password" id="new-password" name="new-password" required>
            <label for="confirm-password">确认新密码:</label>
            <input type="password" id="confirm-password" name="confirm-password" required>
            <button type="submit">修改密码</button>
        </form>
    </section>
</main>

<footer>
    <p>&copy; 购物网站。</p>
</footer>

<script>
    $(document).ready(function() {
        // 根据 URL 的哈希值显示相应的部分
        function showSection() {
            const hash = window.location.hash;
            if (hash === '#change-password') {
                $('#change-password').show();
                $('#profile').hide();
            } else {
                $('#change-password').hide();
                $('#profile').show();
            }
        }
        // 初次加载时显示相应部分
        showSection();

        // 点击链接时更新内容并防止默认行为
        $('nav a').on('click', function(event) {
            const href = $(this).attr('href');
            if (href.startsWith('setting.html')) {
                event.preventDefault(); // 阻止默认链接行为
                window.location.hash = $(this).attr('href').substring($(this).attr('href').indexOf('#')); // 更新哈希
                showSection(); // 显示对应的部分
            }
        });

        // 处理保存个人信息的逻辑
        $('#profile-form').on('submit', function(event) {
            event.preventDefault();
            const email = $('#email').val();
            const phone = $('#phone').val();
            const address = $('#address').val();
            // 在这里发送 AJAX 请求来保存个人信息
            $.ajax({
                url: 'user/change-userinfo', // 替换为实际的后端保存个人信息的接口
                type: 'POST',
                data: {
                    email: email,
                    phone: phone,
                    address: address
                },
                success: function(response) {
                    if (response.state === 200) {
                        alert('个人信息已保存！');
                    } else {
                        alert('保存个人信息失败！');
                        console.log(response);
                    }
                },
                error: function() {
                    alert('保存个人信息时发生错误！');
                }
            });
        });

        // 处理修改密码的逻辑
        $('#password-form').on('submit', function(event) {
            event.preventDefault();
            const currentPassword = $('#current-password').val();
            const newPassword = $('#new-password').val();
            const confirmPassword = $('#confirm-password').val();


            // 在这里发送 AJAX 请求来修改密码
            $.ajax({
                url: 'user/change-password', // 替换为实际的后端修改密码的接口
                type: 'POST',
                data: {
                    oldPassword: currentPassword,
                    newPassword1: newPassword,
                    newPassword2: confirmPassword
                },
                success: function(response) {
                    if (response.state === 200) {
                        alert('密码已修改, 请重新登录！');
                        location.href = 'login.html'; // 跳转到登录页面
                    } else {
                        alert(response.msg);
                    }
                },
                error: function(response) {
                    alert(response.msg);
                }
            });
        });
    });

    function logout() {
        if (confirm("确认要退出登录？")) {
            // 发送AJAX请求退出登录
            $.ajax({
                url: "user/logout",
                type: "get",
                success: function(response) {
                    if (response.state === 200) {
                        alert("退出成功");
                        location.href = "home.html";
                    } else {
                        alert("当前未登陆，点击确认回到首页");
                        location.href = "home.html";
                    }
                },
                error: function() {
                    alert("抱歉，当前状态异常，请点击确认！");
                    location.assign('/home.html');
                }
            });
        }
    }
</script>

</body>
</html>
